<template>
    <div id="consultProcessDetail">
        <div
            id="entirety"
            style="background-image: url('/static/background/background.png')"
        >
            <div class="wholeDiv">
                <el-row :gutter="10" style="min-height: 85vh">
                    <el-col :span="8">
                        <el-card class="card" style="overflow: auto">
                            <div class="clearfix_d">
                                <span
                                    class="title-name"
                                    :title="detailInfo.name"
                                    >{{ detailInfo.name }}</span
                                >
                            </div>
                            <div style="padding-left: 15px">
                                <el-row :span="24">
                                    <div
                                        v-for="item in detailInfo.consultInfos"
                                        :key="item.id"
                                        class="bgbl"
                                    >
                                        <el-row
                                            style="
                                                width: 100%;
                                                height: 100%;
                                                margin-top: 15px;
                                            "
                                        >
                                            <el-col :span="4">
                                                <span style="color: #fff">{{
                                                    item.name
                                                }}</span>
                                            </el-col>
                                            <el-col :span="6">
                                                <span style="color: #fff"
                                                    >CPU：</span
                                                >
                                                <span style="color: #fff"
                                                    >{{ item.cpuUsed }}/{{
                                                        item.cpuQuota
                                                    }}</span
                                                >
                                            </el-col>
                                            <el-col :span="6">
                                                <span style="color: #fff"
                                                    >内存：</span
                                                >
                                                <span style="color: #fff"
                                                    >{{ item.memoryUsed }}/{{
                                                        item.memoryQuota
                                                    }}</span
                                                >
                                            </el-col>

                                            <el-col :span="6">
                                                <span style="color: #fff"
                                                    >存储量：</span
                                                >
                                                <span style="color: #fff"
                                                    >{{ item.capacityUsed }}/{{
                                                        item.capacityQuota
                                                    }}</span
                                                >
                                            </el-col>
                                        </el-row>
                                    </div>
                                </el-row>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card class="card" style="overflow: auto">
                            <div class="clearfix_d">
                                <el-row style="display: flex">
                                    <span
                                        class="title-name"
                                        :title="detailInfo.name"
                                        >{{ detailInfo.name }}</span
                                    >
                                    <span
                                        class="title-name2"
                                        :title="detailInfo.timeInfo"
                                        >{{ detailInfo.timeInfo }}
                                    </span>
                                    <span
                                        class="title-name"
                                        id="detailTimer"
                                    ></span>
                                </el-row>
                            </div>
                            <div class="progress">
                                <div style="height: 100%; width: 100%">
                                    <div
                                        ref="chart"
                                        id="chart"
                                        style="height: 25vh"
                                    ></div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card class="card" style="overflow: auto">
                            <div class="clearfix_d">
                                <span
                                    class="title-name"
                                    :title="detailInfo.name"
                                    >{{ detailInfo.name }}</span
                                >
                            </div>
                            <div
                                v-for="(item, index) in detailInfo.graphInfos"
                                :key="item.id"
                                style="padding-left: 10px; padding-right: 10px"
                            >
                                <el-progress
                                    :color="getProgressColor(item)"
                                    :text-color="getProgressTextColor(item)"
                                    :percentage="item.value"
                                    :status="
                                        item.value === 100
                                            ? 'success'
                                            : 'exception'
                                    "
                                    :text-inside="true"
                                    :format="formatText(item)"
                                >
                                </el-progress>
                                <img
                                    v-if="checkEnd(index)"
                                    class="datecenter-img"
                                    src="/static/kt1/jiantou.png"
                                    width="35"
                                />
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="24" style="padding: 5px">
                        <el-card class="card" style="overflow: auto">
                            <el-input
                                type="textarea"
                                autosize
                                placeholder="请输入内容"
                                v-model="detailInfo.logInfo"
                            >
                            </el-input>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script src='./js/detail.js'>
</script>
<style lang='scss'>
@font-face {
    font-family: 'Alternate';
    font-style: normal;
    font-width: normal;
}

@import './css/detail.scss';
.ellipsis {
    display: block; /* 或 inline-block，具体根据布局需要调整 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.title-name2 {
    font-family: 'Alternate';
    color: #ffffff;
    letter-spacing: 0;
    font-size: 10pt;
    margin-left: auto;
}
</style>
